window.onload = function () {

	// 创建游戏画布
	var canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d');
	if (window.innerWidth) {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
	else {
		canvas.width = document.body.clientWidth;
		canvas.height = document.body.clientHeight;
	}
	document.body.appendChild(canvas);
	
	// 资源加载
	var imgReady = false,	
		img = new Image();
	img.onload = function () {
		imgReady = true;
	};
	img.src = './images/img.png';

	// 兼容处理
	var requestAnimationFrame = 
		window.requestAnimationFrame || 										
		window.webkitRequestAnimationFrame || 
		window.msRequestAnimationFrame || 
		window.mozRequestAnimationFrame;
	var cancelAnimationFrame = 
		window.cancelAnimationFrame || 										
		window.webkitCancelAnimationFrame || 
		window.msCancelAnimationFrame || 
		window.mozCancelAnimationFrame;

// ———— Game ———————————————————————————————————————————————————————————————————————————————————————————————————————

	var Game = function () {
		this.count = 3.5;
		this.bird = {};
		this.birdAct = 1;
		this.birdSpeed = 256;
		this.birdFly = false;
		this.birdDie = false;
		this.pipe = {};
		this.pipeSpeed = 100;
		this.bg = {};
		this.reckon = true;
		this.score = 0;
		this.scores = [];
		this.timer = null;
		this.init();
		return this;
	};

	Game.prototype = {
		constructor: Game,

		// 初始化
		init: function () {
			this.bird.x = canvas.width / 6;	 // 小鸟初始坐标
			this.bird.y = canvas.height / 4;
			this.setPipe();	 // 管道初始化
			this.bg.x = 0;	 // 背景初始化
			window.addEventListener('touchstart', function (e) {  // 点击绑定
				e.preventDefault();
				clearTimeout(this.timer);
				if (!this.birdDie) {
					this.timer = setTimeout(function () {
						if (this.birdFly) {
							this.birdFly = false;	
						}				
					}.bind(this), 160);
					this.birdFly = true;
				}						
			}.bind(this), false);
			return this;
		},

		// 布设管道
		setPipe: function () {
			this.pipe.x = canvas.width;
			this.pipe.topY = 0;
			this.pipe.topH = parseInt( canvas.height * Math.floor(Math.random() * 6 + 2) / 10 );
			this.pipe.bottomY = this.pipe.topH + 50 * ( Math.floor(Math.random() * 2 + 2) + 0.5 );
			this.pipe.bottomH = canvas.height - this.pipe.bottomY;
			return this;
		},

		// 绘制
		draw: function () {
			canvas.width = canvas.width;
			ctx.fillStyle = '#444';
			ctx.font = '20px 微软雅黑';

			// 画背景
			// var bgClipX, bgClipY = 0;
			// if (this.score <= 5) {
			// 	bgClipX = 0;
			// }
			// else {
			// 	bgClipX = 288;
			// }
			for (var i = 0; i < 100; i ++) {
				// ctx.drawImage(img, bgClipX, bgClipY, 287, 512, this.bg.x + canvas.width * i , 0, canvas.width, canvas.height);
				ctx.drawImage(img, 0, 0, 287, 512, this.bg.x + canvas.width * i , 0, canvas.width, canvas.height);
				ctx.drawImage(img, 680, 144, 336, 40, this.bg.x + canvas.width * i, canvas.height * 0.93, canvas.width, canvas.height * 0.07);
			}

			// 倒计时
			switch ( Math.round(this.count) ) {
				case 1:
					ctx.drawImage(img, 947, 0, 14, 44, (canvas.width - 48) / 2, (canvas.height - 132) / 2, 48, 132);
					break;
				case 2:
					ctx.drawImage(img, 963, 0, 22, 44, (canvas.width - 72) / 2, (canvas.height - 132) / 2, 72, 132);
					break;
				case 3:
					ctx.drawImage(img, 987, 0, 24, 44, (canvas.width - 72) / 2, (canvas.height - 132) / 2, 72, 132);
					break;
			}

			// 机会用完，出现结果
			if (chance > 3) {
				var bestScore = Math.max.apply(null, this.scores),
					scoreSpace = 47;
				ctx.font = '25px 微软雅黑';
				ctx.drawImage(img, 680, 185, 204, 54, (canvas.width - 204) / 2, (canvas.height - 400) / 2, 204, 54);
				ctx.drawImage(img, 680, 238, 238, 126, (canvas.width - 238) / 2, (canvas.height - 150) / 2, 238, 126);
				if (bestScore.toString().length > 1) {
					scoreSpace = 39;
				}
				ctx.fillText(bestScore, (canvas.width - 238) / 2 + scoreSpace, (canvas.height - 150) / 2 + 75);
				cancelAnimationFrame(animate); // 停止动画
				return;
			}

			// 画管道
			var pClipX, pClipY = 144, pTClipX, pTClipY = 440;
			if (this.score <= 15) {
				pClipX = pTClipX = 576;
			}
			else {
				pClipX = pTClipX = 628;
			}
			ctx.drawImage(img, pClipX, pClipY, 52, 296, this.pipe.x, this.pipe.topY, 52, this.pipe.topH);
			ctx.drawImage(img, pClipX, pClipY, 52, 296, this.pipe.x, this.pipe.bottomY, 52, this.pipe.bottomH);
			ctx.drawImage(img, pTClipX, pTClipY, 52, 24, this.pipe.x, this.pipe.topH - 24, 52, 24);
			ctx.drawImage(img, pTClipX, pTClipY, 52, 24, this.pipe.x, this.pipe.bottomY, 52, 24);

			// 画标题
			ctx.drawImage(img, 768, 0, 178, 48, canvas.width - 120, 15, 106, 28);

			// 画小鸟
			var birdClipX = 576, birdClipY;
			if (this.score < 10) {
				birdClipY = 0;
			}
			else if (this.score >= 10 && this.score < 20) {
				birdClipY = 48;
			}
			else {
				birdClipY = 96;
			}
			switch (this.birdAct) {
				case 1:
					ctx.drawImage(img, birdClipX, birdClipY, 48, 48, this.bird.x, this.bird.y, 48, 47);
					break;
				case 2:
					ctx.drawImage(img, birdClipX + 48, birdClipY, 48, 48, this.bird.x, this.bird.y, 48, 47);
					break;
				case 3:
					ctx.drawImage(img, birdClipX + 48 * 2, birdClipY, 48, 48, this.bird.x, this.bird.y, 48, 47);
					break;
				case 4:
					ctx.drawImage(img, birdClipX + 48 * 3, birdClipY, 48, 48, this.bird.x, this.bird.y, 48, 47);
					break;
			}						

			// 当前机会与得分
			ctx.fillText('chance : ' + chance, 20, 30);
			ctx.fillText('score : ' + this.score, 20, 55);
			return this;
		},

		// 更新
		update: function () {
			if (chance > 3) {
				return;
			}

			if (!this.birdDie) {
				if (this.birdAct !== 4) {
					if (this.birdAct === 3) {
						this.birdAct = 1;
					}
					else {
						this.birdAct ++;
					}
				}
				else {
					this.birdAct = 1;
				}

				this.count -= 0.02;

				if (this.count < 0.5) {
					if (this.birdFly) { 
						this.bird.y -= this.birdSpeed * 0.025;
					}
					else {
						this.bird.y += this.birdSpeed * 0.02;						
					}

					this.bg.x -= this.pipeSpeed * 0.04;

					if (this.pipe.x < -100) {
						this.reckon = true;
						this.setPipe();
					}
					else {
						this.pipe.x -= this.pipeSpeed * 0.04;	
						this.pipeSpeed += 0.03;
					}

					this.collision();
				}
			}
			else {
				if (this.bird.y + 40 >= canvas.height * 0.93) {
					this.reset();
				}
				this.birdAct = 4;
				this.bird.y += this.birdSpeed * 0.03;
			}
			return this;
		},

		// 碰撞检测
		collision: function () {
			if (this.bird.y + 20 <= 0 || this.bird.y + 34 >= canvas.height * 0.93) {
				this.birdDie = true;
				return;
			}
			if (this.bird.x + 36 >= this.pipe.x && this.bird.x <= this.pipe.x + 44) {
				if (this.bird.y + 20 <= this.pipe.topH || this.bird.y + 28 >= this.pipe.bottomY) {
					this.birdDie = true;
					return;
				}
			}
			if (this.bird.x >= this.pipe.x + 80) {
				if (this.reckon) {	// 计分
					this.score += 1;
					this.reckon = false;
				}
			}
			return this;
		},

		// 重置游戏
		reset: function () {
			chance ++;
			cancelAnimationFrame(animate); // 停止动画
			this.scores.push(this.score);
			this.count = 3.5;
			this.birdFly = false;
			this.birdDie = false;
			this.reckon = true;
			this.score = 0;
			this.birdSpeed = 256;
			this.pipeSpeed = 100;
			this.duration = 500;
			this.timer = null;
			this.init();
			setTimeout(startGame, 1000);
			return this;
		}
	};

// ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

	var chance = 1,
		animate = null,
		game = new Game;

	requestAnimationFrame(startGame);

	// 开始游戏
	function startGame() {
		animate = requestAnimationFrame(startGame);
		game.draw();
		game.update();						
	}

};



